<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="onPanelChange" accordion>
      <el-collapse-item title="宏观统计" name="1">
        <Macro v-if="activeNames === '1'" @macro-search="emit('macro-search', $event)" />
      </el-collapse-item>
      <el-collapse-item title="主要商品统计" name="2">
        <ChinaDataZy v-if="activeNames === '2'" />
      </el-collapse-item>
      <el-collapse-item title="主要经济体" name="3">
        <ChinaDataJJ v-if="activeNames === '3'" />
      </el-collapse-item>
      <el-collapse-item title="详细商品统计" name="4">
        <DetailedStats v-if="activeNames === '4'" @detail-search="emit('detail-search', $event)" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChinaDataZy from './ChinaDataZy.vue';
import ChinaDataJJ from './ChinaDataJJ.vue';
import DetailedStats from './DetailedStats.vue';
import Macro from './Macro.vue';
const emit = defineEmits(['macro-search', 'detail-search']);
const activeNames = ref('1');

</script>

<style lang="scss" scoped>
.demo-collapse {
  max-width: 1200px;
  margin: 0 auto;

  :deep(.el-collapse) {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    background: #fff;
  }

  :deep(.el-collapse-item__header) {
    font-size: 14px; /* 调小标题字体 */
    font-weight: 600;
    color: #303133;
    padding: 0 24px;
    height: 48px;
    transition: all 0.3s;
  }

  :deep(.el-collapse-item__header):hover,
  :deep(.el-collapse-item__header).is-active {
    color: #409eff;
    background-color: #f5f7fa;
  }

  :deep(.el-collapse-item__content) {
    padding: 20px;
    font-size: 12px; /* 调小内容字体 */
    color: #606266;
    background: #fafafa;
    height: 43vh;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
    }
  }}
</style>
